<template>
	<div>
		<h3 class="title">今天天气很{{info}}</h3>
		<button @click="isHot = !isHot">切换天气</button>
		<input type="text" placeholder="输入一些信息" ref="userinput">
		<button @click="showInfo">点我提示输入框内容</button>
		<Hello ref="hhh"/>
	</div>
</template>

<script>
	import Hello from './Hello'

	export default {
		components:{Hello},
		data(){
			return {
				isHot:true
			}
		},
		computed:{
			info(){
				return this.isHot ? '炎热' : '凉爽'
			}
		},
		methods:{
			showInfo(){
				// console.log(this.$refs.userinput.value)
				console.log(this)
			}
		}
	}
</script>

<style scoped>
	.title{
		background-color: skyblue;
	}
</style>